<template>
    <el-card>
        <div style="margin-top: 20px">
            全部评论{{ "(" + commentList.length + ")" }}
        </div>
        <!-- 视频评论 -->
        <div class="plunBox">
            <div v-if="commentList.length > 0" class="infinite-list">
                <div v-for="(item, index) in commentList" :key="index" style="margin-top: 20px">
                    <UserInfo :user_id="item.user_id" :modalShow="false" v-if="item.user_id"></UserInfo>
                    <!-- 正文 -->
                    <div class="flexSB">
                        <div>
                            <div class="dateText">
                                {{ item.message }}
                            </div>
                            <div class="dateText" style="font-size: 12px; color: #a1a1a1; margin: 20rpx 0">
                                {{ item.created_at }}
                            </div>
                        </div>
                        <i class="el-icon-delete deleteIcon" @click.stop="openDel(item.comment_id)"></i>
                    </div>

                    <!-- 展开回复的评论 -->
                    <div v-if="item.reply_count > 0 && showReply == index" style="margin-left: 50px">
                        <div v-for="(item2, index2) in sonCommentList" :key="index2" style="margin-top: 20px">
                            <UserInfo :user_id="item2.user_id" :modalShow="false" v-if="item2.user_id"></UserInfo>
                            <!-- 正文 -->
                            <div class="flexSB">
                                <div>
                                    <div class="dateText">
                                        {{ item2.message }}
                                    </div>
                                    <div class="dateText" style="font-size: 12px; color: #a1a1a1; margin: 20rpx 0">
                                        {{ item2.created_at }}
                                    </div>
                                </div>
                                <i class="el-icon-delete deleteIcon"
                                    @click.stop="openDel(item2.comment_id, true, index, item.comment_id,)"></i>
                            </div>
                        </div>
                        <div style="margin: 30px auto; width: 150px" v-show="moreBtnFHShow">
                            <el-button round style="width: 150px; margin-bottom: 20px"
                                @click="moreHF(item.comment_id, index)">点击加载更多评论</el-button>
                        </div>
                    </div>
                    <!-- 收起回复 -->
                    <div class="reply" v-if="showReply == index && item.reply_count > 0" @click="showReply = -1">
                        <i class="el-icon-minus"></i>
                        收起
                        <i class="el-icon-arrow-up"></i>
                    </div>
                    <!-- 展开回复 -->
                    <div class="reply" v-else @click="getCommentHF(item.comment_id, index)">
                        <div v-if="item.reply_count > 0">
                            <i class="el-icon-minus"></i>
                            展开{{ item.reply_count }}条回复
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </div>
                </div>
                <div style="margin: 30px auto; width: 150px" v-show="moreBtnShow">
                    <el-button round style="width: 150px; margin-bottom: 300px" @click="more">点击加载更多评论</el-button>
                </div>
            </div>
            <div v-else style="text-align: center; margin-top: 50px; color: #464646">
                暂无更多评论~~~
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    props: ['creation_id'],
    data() {
        return {
            commentList: [],
            showReply: -1,
            sonCommentList: [],
            moreBtnShow: false,
            moreBtnFHShow: false,
            page: 1,
            pageHF: 1
        }
    },
    mounted() {
        this.getCommentList()
    },
    methods: {
        getCommentList(id) {
            let that = this
            let parameter = {
                creation_id: that.creation_id,
                page: that.page,
                size: 10,
            };

            console.log("getCommentList9999", that.creation_id)
            this.$request.get('/creation-comment/index', parameter).then((res) => {
                console.log("comment", res)
                if (res.items.length < 10) {
                    that.moreBtnShow = false
                } else {
                    that.moreBtnShow = true
                }

                if (that.page == 1) {
                    that.commentList = res.items
                } else {
                    //上拉加载
                    that.commentList = [...that.commentList, ...res.items];
                }
            })
        },
        sonCommentListFun(id) {
            this.getCommentHF(id);
        },
        //查询评论的回复
        getCommentHF(id, index, fatherId = null) {
            let that = this;
            let parameter = {
                comment_id: !fatherId ? id : fatherId,//回复ID
                page: that.pageHF,
                size: 5,
            };
            this.$request.get('/creation-comment/reply_index', parameter).then((res) => {
                if (res.items.length < 5) {
                    that.moreBtnFHShow = false
                } else {
                    that.moreBtnFHShow = true
                }
                //查询单挑评论的回复               
                console.log("that.sonCommentList", res)
                that.showReply = index;
                if (that.pageHF == 1) {
                    that.sonCommentList = res.items;
                } else {
                    //上拉加载
                    that.sonCommentList = [...that.sonCommentList, ...res.items];
                }
            })
        },
        //加载更多
        more() {
            this.page++;
            this.getCommentList();
        },
        //加载更多回复
        moreHF(id, index) {
            this.pageHF++;
            this.getCommentHF(id, index);
        },


        openDel(id, type, index, fatherId) {
            this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteFun(id, type, index, fatherId)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        deleteFun(id, type, index, fatherId) {
            this.$request.del('/creation-comment/delete/' + id).then((res) => {

                this.$message.success('删除成功')
                if (type) {
                    console.log("查询评论回复")
                    this.getCommentHF(id, index, fatherId);
                    this.getCommentList(id)
                } else {
                    this.getCommentList(id)
                }
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.plunBox2 {
    height: 800px;
    width: 660px;
    background-color: rgba(47, 39, 78, 0.5);
    margin-top: 25px;
    padding: 0 20px;
    overflow: auto;
    margin-right: 60px;
    position: relative;
    /* 使伪元素相对于body定位 */
    z-index: 1;
    background-attachment: fixed;
    /* 设置背景图片固定 */
    /* 从左上到右下的对角渐变 */
    background: linear-gradient(to bottom right, rgba(47, 39, 78, 1.0), rgba(24, 22, 36, 1.0));
}

.plunBox2::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.plunBox {
    height: 420px;
    width: 100%;
    padding: 0 20px;
    overflow: auto;
    margin-right: 60px;
    /* 使伪元素相对于body定位 */
    z-index: 1;
    /* 设置背景图片固定 */
    /* 从左上到右下的对角渐变 */
    color: #222020;

}

.plunBox::-webkit-scrollbar {
    width: 0;
    height: 0;
}



.title {
    text-align: center;
    padding: 15px 0;
    color: #222020;
    font-size: 18px;
}

.headBoxImg_img {
    border-radius: 3px;
    overflow: hidden;
}

.headBoxImg {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.titleName {
    font-size: 26px;
    margin-bottom: 20px;
}

.dateText {
    font-size: 14px;
    color: #222020;
    margin-left: 50px;
}

.titleName {
    color: #222020;
    font-size: 14px;
}





.reply {
    color: #474747;
    font-size: 12px;
    margin-left: 50px;
    margin-top: 10px;
    cursor: pointer;
}



.chatBox {
    margin: 10px 0;
    font-size: 14px;
    color: #222020;
}

.flexFS {
    display: flex;
}

.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deleteIcon {
    color: #cc2a2a;
    cursor: pointer;
}
</style>